import lessModule from "./index.module.less"
import { Radio, RadioChangeEvent } from "antd"
import { useEffect, useState } from "react"
import * as echarts from "echarts"
// 主页-单次推理页面-散点图表
interface componentInterface {
sourceList: Array<Array<number>>,
}
const HomePage_ChartScatterComponent: React.FC<componentInterface> = (props) => {
    console.log(props);

    let [echartsScatter, setChartsScatter] = useState<echarts.ECharts>()
    const init_echarts = () => {
        echartsScatter = echarts.init(document.getElementById("echartsScatter") as HTMLElement)
        setChartsScatter(echartsScatter)
        window.addEventListener("resize", () => {
            echartsScatter?.resize();
        })

        draw_echarts()
    }

    const draw_echarts = () => {
        const echartsOption = {
            // 提示框
            tooltip: {
                trigger: "item",
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                padding: [6, 15 ,6,6],
                formatter: (params: object) => {
                    console.log(params);
                    return `  
                    <div class="${lessModule["homePageChartScatterComponent-chart__tooltip"]}">
                        <div class="${lessModule["chart-tooltip__row"]}">
                            风速：${params["data"][0]} m/s
                        </div>
                        <div class="${lessModule["chart-tooltip__row"]}">
                            功率：${params["data"][1]} kW
                        </div>
                    </div>
                        `
                }
            },
            grid: {
                top: 35,
                left: 50,
                bottom: 60,
                right: 9,
            },
            // x轴配置
            xAxis: {
                // type: 'value',
                name: "风速（m/s）",
                // data: props.windSpeed,
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: '#0D5980'
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    align: "center",
                    color: "#B8D6E5",
                    margin: 10,
                    fontSize: 12,
                    showMinLabel: true,
                    showMaxLabel: true,
                    formatter: (() => {
                        return (item: Object, idx: number) => {
                            const isStart = !idx
                            const isLast = idx === 5 - 1;
                            const label = isStart ? `{start|${item}}` : isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    rich: {
                        start: {
                            align: "left",
                        },
                        last: {
                            align: "center",
                        },
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "#144A66"
                    }
                },
            },
            // y轴配置
            yAxis: {
                type: 'value',
                name: "功率（kW）",
                nameTextStyle: {
                    fontSize: 14,
                    fontWeight: 600,
                    color: '#B8D6E5',
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: '#0D5980'
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255, 255, 255, 0.55)"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "#144A66"
                    }
                },
            },

            // 系列配置
            series: [{
                type: 'scatter',
                data: props.sourceList,
                symbolSize: 4,
                color: "#17A1E6",
            }],
        }
        echartsScatter?.setOption(echartsOption);
    }


    useEffect(() => {
        init_echarts()
        return () => {
            echartsScatter?.dispose()
        }
    }, [props.sourceList])

    return (
     <div className={lessModule["homePageChartScatterComponent"]} >
           <div id="echartsScatter" className={lessModule["homePageChartScatterComponent-chart"]}></div>
              <div className={lessModule["homePageChartScatterComponent-name"]}>风速（m/s）</div>
     </div>
    )
}

export default HomePage_ChartScatterComponent